import React,{Component} from 'react';
import PropTypes from 'prop-types';
import ReactPullLoad,{ STATS } from 'react-pullload';
import style from './VtxPullLoad.less';

const HeadNode = ({loaderState})=>{
    const States = [STATS.pulling,STATS.enough,STATS.refreshing,STATS.refreshed];
    const stateMap = {
        [STATS.pulling]:'下拉刷新',
        [STATS.enough]:'松开刷新',
        [STATS.refreshing]:'正在刷新...',
        [STATS.refreshed]:'刷新成功'
    }
    return (
        <div className={stateMap[loaderState]?style.headNode:style.hide}>
            {
                loaderState==STATS.refreshing?<i className={style.ui_loading} />:null
            }
            {stateMap[loaderState]}
        </div>   
    )
}

const FooterNode = ({loaderState,hasMore})=>{
    let showMsg;
    if(loaderState==STATS.loading && hasMore){
        showMsg = <div><i className={style.ui_loading} />加载中...</div>
    }
    else if(!hasMore){
        showMsg = '暂无数据';
    }
    else{
        showMsg = '↑ 上拉加载更多'
    }
    return (
        <div className={style.headNode}>
            {showMsg}
        </div>
    )
}

class VtxPullLoad extends Component{
    constructor(props){
        super(props)
        this.handleAction = this.handleAction.bind(this);
        this.state = {
            action: STATS.init
        }
    }
    handleAction(newAction){
        const t = this;
        if(newAction === t.state.action){
            return false
        }
        if(newAction === STATS.refreshing){//刷新
            t.props.handRefreshing();
        } else if(newAction === STATS.loading ){//加载更多
            if(t.props.hasMore && t.state.action!=STATS.refreshing){
                t.props.handLoadMore();
            }
        } else{
            t.setState({action:newAction})
        }
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.load !== this.props.load){
            if(nextProps.load){
                this.setState({action:STATS.loading})
            }
            else{
                this.setState({action:STATS.reset})
            }    
        }
        if(nextProps.refresh !== this.props.refresh){
            if(nextProps.refresh){
                this.setState({action:STATS.refreshing})
            }
            else{
                this.setState({action:STATS.refreshed})
            }    
        }
    }
    render(){
        const {hasMore,downEnough=100,distanceBottom=1000,style,id,isBlockContainer} = this.props;
       
        const ReactPullLoadProps = {
            action:this.state.action,
            hasMore,
            handleAction:this.handleAction,
            downEnough,
            distanceBottom,
            HeadNode:this.props.HeadNode || HeadNode,
            FooterNode: this.props.FooterNode || FooterNode,
            style,
            id,
            isBlockContainer
        }
        return (
            <ReactPullLoad {...ReactPullLoadProps}>
                {this.props.children}
            </ReactPullLoad>
        )
    }
}

VtxPullLoad.propTypes = {
    hasMore: PropTypes.bool.isRequired,
    load: PropTypes.bool.isRequired, 
    refresh: PropTypes.bool.isRequired,
    handRefreshing: PropTypes.func.isRequired,
    handLoadMore: PropTypes.func.isRequired,
    downEnough: PropTypes.number,
    distanceBottom: PropTypes.number,
    isBlockContainer: PropTypes.bool
}

export default VtxPullLoad;